<template>
    <view class="container page" v-if="info">
        <view class="bac-color-fff mar-t-10">
			<swiper
				class=""
				indicator-color="#d5d5d5"
				indicator-active-color="#ffffff"
				:indicator-dots="true"
				:autoplay="autoplay"
				:interval="interval"
				:duration="duration"
			>
				<swiper-item class="flex-column flex-1" v-for="(item,index) in info.images" :key="index">
					<image class="banner-item" :src="item" mode="widthFix" lazy-load='true'></image>
				</swiper-item>
				
			</swiper>
		</view>
        <view class="mar-t-10 bac-color-fff info">
            <view class="title">
                {{info.name}}
            </view>
            <view class="flex mar-t-10 align-bottom">
                 <image src="@/static/icons/address.png" style="height:1em;width:1em"></image>
                 <view class="mar-l-5 font-color-777 font-size-13"> {{info.address}}</view>
            </view>
             <view class="flex mar-t-10 align-bottom">
                 <image src="@/static/icons/phone.png" style="height:1em;width:1em"></image>
                 <view class="mar-l-5 font-color-777 font-size-13">{{info.phone}}</view>
            </view>
        </view>
        <view class="mar-t-10 bac-color-fff info">
            <view class="font-size-16">简介</view>
            <view class="mar-t-10 font-color-999 font-size-14" v-html="info.content">
              
            </view>
        </view>
    </view>
</template>

<script>
import {getRoomDetail} from '@/utils/http'
export default {
    data() {
         return {
            autoplay: true,
			interval:6000,
			duration:500,
            id:'',
            info:'',
        }
    },
    methods: {
        getRoomDetail(){
			getRoomDetail({id:this.id}).then(res=>{
				if(res){
					this.info = res
				}
				
			})
		},
    },
    onLoad(option) {
        this.id = option.id;
        this.getRoomDetail();
    },
}
</script>

<style scoped>
page{
    background: #F4F5FA;
}
.banner-box {
	border-radius: 5px;
	/* height: 500rpx !important; */
}
.banner {
	border-radius: 5px;
	/* height: 500rpx !important; */
}
.banner-item {
	border-radius: 10rpx;
	text-align: center;
	width: 100%;
}
.info{
    padding: 20rpx 30rpx;
}
</style>